<template>
   <div>
      <div class="areatitle">
          <router-link to="/home/workplace">
          <i class="iconfont icon-back"></i>
          </router-link>
          <div class="inner"></div>
          <div class="atitle">
            标题&nbsp;:&nbsp;
            <el-input v-model="title" placeholder="请输入标题" class="input"></el-input>
          </div>
          <el-button class="button-share" type="primary" icon="el-icon-share" circle @click="share"></el-button>
          <el-button class="button-star" type="success" icon="el-icon-star-off" circle @click="star"></el-button>
          <el-button class="button-comment" type="warning" icon="el-icon-document" circle @click="comment"></el-button>

        </div>

        <div class="editarea">
          <!-- 
              <textarea id="editor" name="editor" rows="20" class="form-control" v-model="content"></textarea> 
           -->
           <vue-ueditor-wrap v-model="content" :config="myConfig"></vue-ueditor-wrap>
        </div>
        <div class="footarea">
          <el-button id="submit" type="primary" @click="submit">提交修改</el-button>
        </div>
   </div>
        

</template>

<script>
import { mapState } from 'vuex';
import { reqCreate } from '../../api';
import { mapGetters, mapActions } from 'vuex'
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  name: "Edit",
  components: {
    VueUeditorWrap
  },
  data(){
    return {
      title:"",
      isstar:false,
      comment:"",

      userid:this.userInfo.userid,

      content:'aaaaaa',

      articleid: this.$route.params.articleid,

      props: { multiple: true },

      auth:"write",
      myConfig: {
                toolbars: [[
                    'fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'emotion', 'map', 'insertcode', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', '|',
                    'print', 'preview',
                ]],
                autoHeightEnabled: true,// 编辑器不自动被内容撑高
                initialFrameHeight: 600, // 初始容器高度
                initialFrameWidth: '100%',// 初始容器宽度
                serverUrl:'',
                UEDITOR_HOME_URL: '/UEditor/',
                maximumWords:'100000000'
            }
  
}
},

    

  computed:{
    ...mapState(['userInfo']),
    ...mapGetters(['user']),
    
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    ...mapActions(['getUserInfo']),
      /*
    initEditor() {
      this.editor = window.CKEDITOR.replace('editor', {
        height: 600,
        bodyClass: 'document-editor'
      })
      window.CKEDITOR.on('instanceReady', e => {
        console.log('ckeditor初始化', e)
        const upload = e.editor.uploadRepository
        upload.on('instanceCreated', function(eve) {
          console.log('创建了')
        })
        e.editor.on('change', function(change) {
          console.log('change', change)
        })
        e.editor.on('fileUploadRequest', (evt) => {
          const fileLoader = evt.data.fileLoader
          const formData = new FormData()
          const xhr = fileLoader.xhr
          fileLoader.uploadUrl = '/services/businessservice/api/attachments/uploadFile' // 上传文件接口地址
          xhr.open('post', fileLoader.uploadUrl, true)
          formData.append('file', fileLoader.file, fileLoader.fileName)
          fileLoader.xhr.send(formData)
          // Prevented the default behavior.
          evt.stop()
          // 上传
        })
        e.editor.on('fileUploadResponse', (evt) => {
          evt.stop()
          const data = evt.data
          const xhr = data.fileLoader.xhr
          const response = xhr.responseText
          const res = JSON.parse(response)
          if (res.meta.code === 200) {
            data.message = res.meta.message
            data.url =  res.data.url // 上传图片成功后返回的图片路径
          }
        })
        e.editor.on("loaded",function(t){

        })
      })

    },
*/
    //创建新文档
    async submit(){
        var val = CKEDITOR.instances.applicationform.getData();

        const {userid,title,content,auth}=this
        const result=await reqCreate(userid,title,content,auth)
        console.log(result)
    },
    share(){

    },
    star(){

    },
    comment(){

    }
  },
}
  


</script>
<style>
.input{
  position: absolute;
  width: 200px;
  height: px;
  top: -10px;
}
.area{
  background-color: #faf8f8f1;
}
.areatitle{
  width: 100%;
  
}
.editarea{
  width: 90%;
  margin: auto;
  margin-top: 45px;
}
.iconfont{
  display: block;
  font-size: 50px;
  color: rgb(133, 126, 126);
  position: absolute;
  left: 70px;
}
.atitle{
 margin-left:25%;
 position: absolute;
 top: 15px;
 font-size:20px;
}
.inner{
  height:10px ;
}
.button-share{
 position: absolute;
 right: 180px;
}
.button-star{
 position: absolute;
 right: 80px;
}
.button-comment{
 position: absolute;
 right: 130px;
}
.footarea{
  margin-top: 5px;
}
#submit{
  float: right;
 margin-right: 73px;
}
</style>